<template>
  <div>
    <v-overlay opacity="0">
      <file-show v-if="file" :file.sync="file"></file-show>
      <v-card
        v-else
        class="d-flex"
        width="80vw"
        height="45vw"
        color="grey darken-4"
      >
        <div class="folder-info d-flex justify-center">
          <span class="folder-title">{{ folder }}</span>
          <div class="info-detail">
            <span>共计{{ image_counter }}张照片,{{ video_counter }}个视频</span>
          </div>
        </div>
        <div class="folder-content d-flex flex-column">
          <div class="d-flex justify-end" style="width:100%">
            <v-icon @click="closeFolder" color="red" tag="button"
              >mdi-close-circle</v-icon
            >
          </div>
          <div class="d-flex flex-wrap">
            <div
              v-for="(item, index) of files"
              :key="index"
              class="content d-flex flex-column align-center"
            >
              <v-card hover class="rounded-0" @click="file = item">
                <div
                  class="box d-flex align-center justify-center"
                  :style="{
                    backgroundImage: `url(${item.file_mini})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                  }"
                >
                  <v-icon
                    v-if="/video/.test(item.file_type)"
                    color="orange"
                    x-large
                    >mdi-play-circle-outline</v-icon
                  >
                </div>
              </v-card>
              <span>{{ item.file_name }}</span>
            </div>
          </div>
        </div>
      </v-card>
    </v-overlay>
  </div>
</template>

<script>
import { http } from "@/utils/http.js";
export default {
  name: "folderShow",
  data() {
    return {
      //文件列表
      files: [],
      file: null,
      image_counter: 0,
      video_counter: 0,
    };
  },
  props: {
    folder: String,
  },
  mounted() {
    this.init();
    this.$bus.$on("fileHandle", this.fileHandle);
  },
  methods: {
    //数据初始化
    async init() {
      const config = {
        url: "/data/getFolderData",
        method: "get",
        params: {
          folder: this.folder,
        },
      };
      const result = await http(config);
      this.files = result.data.data.result;
      this.image_counter = result.data.data.counter.image;
      this.video_counter = result.data.data.counter.video;
    },
    //关闭文件夹
    closeFolder() {
      this.$emit("update:folder", null);
    },
    //文件操作
    fileHandle(arg) {
      const {
        type,
        file_id,
        file_memo,
        file_folder,
        current_folder,
        file,
      } = arg;
      if (type == "delete") {
        //删除
        for (let index in this.files) {
          if (this.files[index].file_id == file_id) {
            this.files.splice(index, 1);
          }
        }
      } else if (type == "edit") {
        // 修改备忘
        for (let item of this.files) {
          if (item.file_id == file_id) {
            item.file_memo = file_memo;
          }
        }
      } else {
        //从原收藏夹中删除
        if (this.folder == current_folder) {
          for (let index in this.files) {
            if (this.files[index].file_id == file_id) {
              this.files.splice(index, 1);
            }
          }
        }
        //加入到新的收藏夹
        if (this.folder == file_folder) {
          this.files.push(file);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.folder-info {
  border-right: 1px black solid;
  box-sizing: border-box;
  width: 25%;
  height: 100%;
  padding: 10px;
  position: relative;
  .folder-title {
    font-size: 30px;
    color: #bdbdbd;
    margin-top: 100px;
  }
  .info-detail {
    position: absolute;
    bottom: 20px;
    right: 20px;
    span {
      font-weight: 900;
      margin: 0 2px;
      color: var(--theme-color);
    }
  }
}
.folder-content {
  width: 75%;
  height: 100%;
  padding: 10px;
  overflow: scroll;
}
.content {
  height: 150px;
  width: 150px;
  margin-top: 30px;
  span {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //显示几行
  }
}
.box {
  height: 100px;
  width: 100px;
}
</style>
